//用了element组件，自己要加载和引入
<template>
  <div class="all-container">
    <div class="all-container-padding bg">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="userlist" :rules="rules" ref="EditorUserForms">

            <el-form-item
            label="头像"
            prop="avatar_url"
            :label-width="formLabelWidth"
          >
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/uploadData"
              :before-upload="beforeupload"
              :data="uploadParm"
              :show-file-list="false"
              :on-success="handleUpSuccess"
            >
              <img
                v-if="userlist.avatar_url"
                :src="userlist.avatar_url"
                class="avatar"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="width: 80px; height: 80px"
              ></i>
            </el-upload>
          </el-form-item>



            <el-form-item
              label="昵称"
              prop="username"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.username" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="教师姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.name" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="教师编号"
              prop="number"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.number" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
              <el-col :span="8">
                <el-input v-model="userlist.sex" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="地址"
              prop="address"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.address" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="任教科目"
              prop="subject"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.subject" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="电话" prop="tel" :label-width="formLabelWidth">
              <el-col :span="8">
                <el-input v-model="userlist.tel" placeholder="请输入电话">
                </el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="EditorUserClick('userlist')"
              >保存</el-button
            >
          </div>
        </el-tab-pane>

        <el-tab-pane label="修改密码" name="second">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item
              label="原密码"
              prop="pass"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input
                  v-model="ruleForm.pass"
                  placeholder="请输入原密码"
                  type="password"
                ></el-input
              ></el-col>
            </el-form-item>
            <el-form-item
              label="新密码"
              prop="newpass"
              :label-width="formLabelWidth"
            >
              <el-col :span="8"
                ><el-input
                  v-model="ruleForm.newpass"
                  placeholder="请输入新密码"
                  id="newkey"
                  type="password"
                ></el-input
              ></el-col>
            </el-form-item>
            <el-form-item
              label="重复新密码"
              prop="checknewpass"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input
                  v-model="ruleForm.checknewpass"
                  placeholder="请再次输入新密码"
                  id="newkey1"
                  type="password"
                ></el-input
              ></el-col>
            </el-form-item>
          </el-form>
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了
//import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";
//这一步很重要，一般我们直接从后台拿过来输出来会是在data里面，但是我发现却在store里面，这里就要用到vuex
//import { mapGetters } from "vuex";
import axios from "axios";
export default {
  data() {
    /*****检验两次密码是否一致***/
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checknewpass !== "") {
          this.$refs.ruleForm.validateField("checknewpass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newpass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      messagess: "",
      uploadParm: {}, //图片的上传
      ruleForm: {}, //修改密码的表单
      activeName: "first",
      loading: true,
      baseUrl: process.env.BASE_API,
      userlist: { username: this.$store.state.useraccount }, //用户信息表单
      formLabelWidth: "150px",
      /***校验***/
      rules: {
        tel: [
          {
            required: true,
            message: "请输入电话号码",
          },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "手机格式不对",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入电子邮箱",
          },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
            message: "请输入有效的邮箱",
          },
        ],
        pass: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
        newpass: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        checknewpass: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.getUser();
    //this.upload();
  },
  methods: {
    //上传之前
    beforeupload(file) {
      
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //图片上传上传成功
    handleUpSuccess(response, file, fileList) {
      
    },
    //获取个人用户的信息
    getUser() {
      axios
        .get("http://localhost:8080/selectTeacherData", {
          params: {
            username: this.$store.state.useraccount,
          },
        })
        .then((response) => {
          this.userlist = response.data;
        });
    },
    // 编辑提交的方法
    EditorUserClick() {
      axios
        .get("http://localhost:8080/selectTeacherData1", {
          params: {
            name: this.userlist.name,
            tel: this.userlist.tel,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            this.messagess = "保存成功";

            this.open();
          } else {
            this.messagess = "修改失败:";

            this.open();
          }
        });
    },
    //tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //修改密码
    submitForm(ruleForm) {
      axios
        .get("http://localhost:8080/selectTeacherData2", {
          params: {
            username: this.userlist.username,
            oldpassword: this.ruleForm.pass,
            newpassword: this.ruleForm.newpass,
          },
        })
        .then((response) => {
          if (response.data.statu == 200) {
            this.messagess = "保存成功";

            this.open();
          } else {
            this.messagess = "修改失败:" + response.data.message;

            this.open();
          }
        });
    },
    //弹框
    open() {
      this.$alert(this.messagess, "消息提示", {
        confirmButtonText: "确定",
      });
    },
  },
};
</script>
